<template>
	<el-container v-loading="loading">
		<el-main>
			<el-card shadow="never" header="微信小程序">
				<el-col :lg="{span: 8, offset: 1}">
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="小程序名称"  width="120">
							<el-input v-model="config.name"  placeholder="请输入小程序名称"></el-input>
						</el-form-item>
						<el-form-item label="原始ID"  width="120">
							<el-input v-model="config.original_id"  placeholder="请输入原始ID"></el-input>
						</el-form-item>
						<el-form-item label="小程序码">
							<sc-upload v-model="config.qr_code"></sc-upload>
							<div class="el-form-item-msg">建议尺寸：宽400px*高400px。jpg，jpeg，png格式</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="开发者ID" style="margin-top: 15px;">
				<el-col :lg="{span: 8, offset: 1}">
					<el-form ref="form" :rules="rules" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="AppID"  width="120"  prop="app_id">
							<el-input v-model="config.app_id" clearable  placeholder="请输入AppID"></el-input>
						</el-form-item>
						<el-form-item label="AppSecret"  width="120"  prop="app_secret">
							<el-input v-model="config.app_secret" clearable  placeholder="请输入AppSecret"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="服务器域名" style="margin-top: 15px;">
				<el-col :lg="{span: 9, offset: 0}">
					<el-form ref="form" :model="config" label-width="160px" style="margin-top: 20px;">
						<el-form-item label="request合法域名"  width="120" style="display: flex;">
							<el-input v-model="config.request_domain" disabled style="width: 83%;"></el-input>
							<el-button v-copy="config.request_domain" type="info" style="margin-left: 10px;">复制</el-button>
						</el-form-item>
						<el-form-item label="socket合法域名"  width="120" style="display: flex;">
							<el-input v-model="config.socket_domain" disabled  style="width: 83%;"></el-input>
							<el-button v-copy="config.socket_domain" type="info" style="margin-left: 10px;">复制</el-button>
						</el-form-item>
						<el-form-item label="uploadFile合法域名"  width="120" style="display: flex;">
							<el-input v-model="config.upload_file_domain" disabled  style="width: 83%;"></el-input>
							<el-button v-copy="config.upload_file_domain" type="info" style="margin-left: 10px;">复制</el-button>
						</el-form-item>
						<el-form-item label="downloadFile合法域名"  width="120" style="display: flex;">
							<el-input v-model="config.download_file_domain" disabled  style="width: 83%;"></el-input>
							<el-button v-copy="config.download_file_domain" type="info" style="margin-left: 10px;">复制</el-button>
						</el-form-item>
						<el-form-item label="udp合法域名"  width="120" style="display: flex;">
							<el-input v-model="config.udp_domain" disabled  style="width: 83%;"></el-input>
							<el-button v-copy="config.udp_domain" type="info" style="margin-left: 10px;">复制</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="业务域名" style="margin-top: 15px;">
				<el-col :lg="{span: 8, offset: 1}">
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="业务域名"  width="120" style="display: flex;">
							<el-input v-model="config.business_domain" disabled   style="width: 83%;"></el-input>
							<el-button v-copy="config.business_domain" type="info" style="margin-left: 10px;">复制</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
		</el-main>
		<el-footer style="height:51px;text-align: center;">
			<el-button type="primary" @click="setConfig()">保存</el-button>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		name: 'system',
		data() {
			return {
				config:{},
				rules: {
					app_id:[
						{required: true, message: '请输入AppID'}
					],
					app_secret:[
						{required: true, message: '请输入AppSecret'}
					],
				},
				isSaveing: false
			}
		},
		mounted() {
			this.getConfig()
		},
		methods: {
			async setConfig(){
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.setting.weapp.setConfig.post(this.config);
						this.isSaveing = false;
						if(res.code == 1){
							this.$emit('success', this.form, this.mode)
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
				
			},
			async getConfig(){
				var res = await this.$API.setting.weapp.getConfig.get()
				if(res.code == 1){
					this.config = res.data
				}
			}
		}
	}
</script>

<style>
</style>
